<template>
  <div class="role">
    <avue-crud
      :option="option"
      :data="data"
      :page.sync="page"
      @on-load="onLoad"
      v-model="item"
    ></avue-crud>

    <ScaleSelectList></ScaleSelectList>
  </div>
</template>

<script>
import ScaleSelectList from "./scale-select-list.vue";
export default {
  name: "Role",
  components: {
    ScaleSelectList,
  },
  data() {
    return {
      option: {
        addBtnText: "添加类别",
        delBtnText: "删除",
        excelBtn: false,
        addBtn: false,
        delBtn: false,
        border: true,
        menu: false,
        index: true,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        menuWidth: 480,
        column: [
          {
            width: 130,
            label: "选择",
            prop: "name",
          },
          {
            label: "序号",
            prop: "classify",
            // type: "icon",
            formslot: true,
            // searchslot: true,
            // search: true,
            iconList: [
              {
                label: "基本图表",
                list: ["el-icon-time", "el-icon-bell", "el-icon-star-on"],
              },
            ],
          },
          {
            width: 130,
            label: "角色名称",
            prop: "name",
          },
        ],
      },
      data: [
        {
          id: "1",
          name: "张三",
          age: 14,
          grade: 1,
          phone1: "17547400800",
          phone: "17547400800",
          icon: "el-icon-time",
          test: 1,
          sex: "男",
        },
        {
          id: "4",
          name: "王五",
          age: 10,
          grade: 1,
          test: 1,
          sex: "女",
          icon: "el-icon-star-on",
          phone1: "17547400800",
          phone: "17547400800",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.role {
}
</style>
